<template>
  <div class="account-settings-info-view">
    <a-row :gutter="16">
      <a-col :md="24" :lg="16">
        <a-form-model layout="vertical" ref="ruleForm" :model="formData" :rules="validatorRules">
          <a-form-model-item
            label="姓名"
            prop="realname"
          >
            <a-input :disabled="true" v-model="formData.realname" placeholder="姓名" />
          </a-form-model-item>
          <a-form-model-item
            label="邮箱"
            prop="email"
          >
            <a-input :disabled="true" v-model="formData.email" placeholder="邮箱"/>
          </a-form-model-item>
          <a-form-model-item label="头像" >
            <j-image-upload :disabled="true" class="avatar-uploader" text="上传" v-model="formData.avatar" ></j-image-upload>
          </a-form-model-item>
          <a-form-model-item label="性别" >
            <a-select :disabled="true" v-model="formData.sex" placeholder="请选择性别" :getPopupContainer= "(target) => target.parentNode">
                <a-select-option :value="1">男</a-select-option>
                <a-select-option :value="2">女</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="手机号码" prop="phone">
            <a-input :disabled="true" placeholder="请输入手机号码" v-model="formData.phone" />
          </a-form-model-item>
          <a-form-model-item label="座机" prop="telephone">
            <a-input :disabled="true" placeholder="请输入座机" v-model="formData.telephone"/>
          </a-form-model-item>
          <a-form-model-item>
            <!-- <a-button type="primary" >提交</a-button> -->
            <!-- <a-button type="primary" @click="handleSubmit">保存</a-button> -->
          </a-form-model-item>
        </a-form-model>

      </a-col>
      <!-- <a-col :md="24" :lg="8" :style="{ minHeight: '180px' }">
        <div class="ant-upload-preview" @click="$refs.modal.edit(1)" >
          <a-icon type="cloud-upload-o" class="upload-icon"/>
          <div class="mask">
            <a-icon type="plus" />
          </div>
          <img :src="option.img"/>
        </div>
      </a-col> -->
    </a-row>

    <avatar-modal ref="modal">

    </avatar-modal>
  </div>
</template>

<script>
import AvatarModal from './AvatarModal'
import JImageUpload from '@/components/jeecg/JImageUpload'
import { getAction } from '@/api/manage'
import { mapGetters } from 'vuex'
import { editUser, queryUserRole, duplicateCheck } from '@/api/api'
export default {
  components: {
    AvatarModal,
    JImageUpload
  },
  data() {
    return {
      // cropper
      preview: {},
      option: {
        img: '/avatar2.jpg',
        info: true,
        size: 1,
        outputType: 'jpeg',
        canScale: false,
        autoCrop: true,
        // 只有自动截图开启 宽度高度才生效
        autoCropWidth: 180,
        autoCropHeight: 180,
        fixedBox: true,
        // 开启宽度和高度比例
        fixed: true,
        fixedNumber: [1, 1]
      },
      fileList: [],
      formData: {},
      url: {
        list: '/sys/user/list'
      },
      validatorRules: {
        realname: [{ required: true, message: '请输入用户名称!' }],
        phone: [{ validator: (rule, value, callback) => this.validatePhone(rule, value, callback) }],
        email: [{ validator: this.validateEmail }],
        telephone: [
          { pattern: /^0\d{2,3}-[1-9]\d{6,7}$/, message: '请输入正确的座机号码' }
        ]
      }
    }
  },
  methods: {
    ...mapGetters(['userInfo']),
    handleSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.formData.selecteddeparts = this.formData.departIds
          editUser(this.formData).then(res => {
            if (res.success) {
              this.$message.success(res.message)
            } else {
              this.$message.warning(res.message)
            }
          })
        } else {
          return false
        }
      })
    },
    async loadData() {
      Promise.all([
        getAction(this.url.list, { username: this.userInfo().username }),
        queryUserRole({ userid: this.userInfo().id })
      ]).then(res => {
        if (res[0].success && res[1].success) {
          this.formData = res[0].result.records[0]
          this.formData.selectedroles = res[1].result.join(',')
        }
      })
    },
    validatePhone(rule, value, callback) {
      if (!value) {
        callback()
      } else {
        if (new RegExp(/^1[3|4|5|6|7|8|9][0-9]\d{8}$/).test(value)) {
          var params = {
            tableName: 'sys_user',
            fieldName: 'phone',
            fieldVal: value,
            dataId: this.formData.id
          }
          duplicateCheck(params).then((res) => {
            if (res.success) {
              callback()
            } else {
              callback('手机号已存在!')
            }
          })
        } else {
          callback('请输入正确格式的手机号码!')
        }
      }
    },
    validateEmail(rule, value, callback) {
      if (!value) {
        callback()
      } else {
        if (new RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/).test(value)) {
          var params = {
            tableName: 'sys_user',
            fieldName: 'email',
            fieldVal: value,
            dataId: this.formData.id
          }
          duplicateCheck(params).then((res) => {
            if (res.success) {
              callback()
            } else {
              callback('邮箱已存在!')
            }
          })
        } else {
          callback('请输入正确格式的邮箱!')
        }
      }
    }
  },
  mounted() {
    this.loadData()
  }
}
</script>

<style lang="less" scoped>

  .avatar-upload-wrapper {
    height: 200px;
    width: 100%;
  }

  .ant-upload-preview {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 180px;
    border-radius: 50%;
    box-shadow: 0 0 4px #ccc;

    .upload-icon {
      position: absolute;
      top: 0;
      right: 10px;
      font-size: 1.4rem;
      padding: 0.5rem;
      background: rgba(222, 221, 221, 0.7);
      border-radius: 50%;
      border: 1px solid rgba(0, 0, 0, 0.2);
    }
    .mask {
      opacity: 0;
      position: absolute;
      background: rgba(0,0,0,0.4);
      cursor: pointer;
      transition: opacity 0.4s;

      &:hover {
        opacity: 1;
      }

      i {
        font-size: 2rem;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -1rem;
        margin-top: -1rem;
        color: #d6d6d6;
      }
    }

    img, .mask {
      width: 100%;
      max-width: 180px;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
    }
  }
</style>
